<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/main.css">
<script type="text/javascript" src="../../js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="app">
<div id="forms" class="mt10">
	<div class="box">
		<div class="box_border">
			<div class="box_center">
				<form id="myform">
				酒店名称：<input type="text" id="tname" class="input-text lh30" size="40"/>&nbsp;&nbsp;
				酒店地址：<input type="text" id="address" class="input-text lh30" size="40"/>&nbsp;&nbsp;
				<input type="button" name="button" class="btn btn82 btn_save2" onclick="addNewsTypeInfo()" value="查询"/>&nbsp;&nbsp;
				</form>
			</div>
		</div>
	</div>
</div>

<div id="table" class="mt10">
	<div class="box span10 oh">
		<table width="100%" border="0" cellpadding="0" cellspacing="0" class="list_table">
			<thead>
				<tr>
					<th width="20%">编号</th>
                   	<th width="20%">酒店名称</th>
                   	<th width="25%">酒店地址</th>
                   	<th width="20%">状态</th>
                   	<th>操作</th>
                </tr>
            </thead>
            <tbody id="admin_info" align="center">
				<tr v-for="item in hotelInfo">
					<td>{{item.hno}}</td>
					<td>{{item.hname}}</td>
					<td>{{item.address}}</td>
					<td class="green" v-if="item.status == 1">正常</td>
					<td class="red" v-else="item.status == 0">冻结</td>
					<td><a href='' @click="close(item.hno)">[冻结]</a>&nbsp;&nbsp;<a @click="open(item.hno)" href='' class="red">[解封]</a></td>
				</tr>
            </tbody>
		</table>
		
		<div class="page mt10">
		<div class="pagination">
            <ul id ="pagination_info">
				<li class="first-child active"><a href="javascript:void()" @click="getHotelInfo(1)">首页</a></li>
				<li class="active"><a href="javascript:void()" @click="getHotelInfo(1)">1</a></li>
				<li><a href="javascript:void()" @click="getHotelInfo(2)">2</a></li>
				<li><a href="javascript:void()" @click="getHotelInfo(3)">3</a></li>
				<li><a href="javascript:void()" @click="getHotelInfo(4)">4</a></li>
				<li><a href="javascript:void()" @click="getHotelInfo(5)">5</a></li>
				<li><a href="javascript:void()" @click="getHotelInfo(6)">6</a></li>
				<li class="last-child"><a href="javascript:void()" @click="getHotelInfo(6)">末页</a></li>
			</ul>
		</div>
        </div>
	</div>
</div>
</div>

<script type="text/javascript" src="../../js/vue.js"></script>
<script type="text/javascript" src="../../js/qs.js"></script>
<script type="text/javascript" src="../../js/axios.js"></script>
<script type="text/javascript" src="../../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
	let app = new Vue({
		el: '#app',
		data:{
			hotelInfo:[],
			hno:''
		},
		
		methods:{
			//后台获取酒店信息
			getHotelInfo(index){
				axios.get("../../HotelController/getHotelInfo",{
					params:{
						page:index
					}
				}).then(resp=>{
					if(resp.data.data == -1) return alert("失败");
						this.hotelInfo = resp.data.data;
				});
			},
			
			// 解封
			open(hno){
				axios.get("../../HotelController/open",{
					params:{
						hno
					}
				}).then(resp=>{
					if(resp.data.data == 500) return alert("失败");
				})
				this.getHotelInfo(1);
			},
			
			//冻结
			close(hno){
				axios.get("../../HotelController/close",{
					params:{
						hno
					}
				}).then(resp=>{
					if(resp.data.data == 500) return alert("失败");
				})
				this.getHotelInfo(1);
			},
		},
		
		
			
		mounted(){
			this.getHotelInfo(1);
		}
	})
</script>
</body>
</html>